<div class="text-3xl font-bold flex" translate>
  <img src="./assets/images/uload-icon.svg" alt="" class="w-10" />
  datafeeder.upload.inputLabel
</div>
<div class="border rounded-md border-solid border-2 border-gray-300 h-12 my-2">
  <ui-drag-and-drop-file-input
    (fileChange)="fileChange($event)"
    placeholder="..."
    [accept]="acceptedMimeType.join(',')"
  ></ui-drag-and-drop-file-input>
</div>
<div class="pb-4">
  <input
    class="cursor-pointer"
    type="checkbox"
    [checked]="haveRights"
    (change)="haveRights = !haveRights"
  />
  <span
    class="pl-2 italic cursor-pointer"
    (click)="haveRights = !haveRights"
    translate
    >datafeeder.upload.checkboxLabel</span
  >
</div>
<ui-button
  (click)="handleUploadBtnClick()"
  type="primary"
  extraClass="rounded-full px-20"
  [disabled]="uploading"
>
  <svg
    *ngIf="uploading"
    class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>
    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
  <span class="uppercase text-white font-bold" translate
    >datafeeder.upload.uploadButton</span
  >
</ui-button>
